<template>
	<Layout class="p-5 bg-white text-secondary">
		<Layout class="bg-white mb-5">
			<h5 class="m-1">客户基本信息</h5>
			<Row class="m-1">
				<Col span="4">
					<span>编号：</span><span>{{client.clientId}}</span>
				</Col>
				<Col span="4">
					<span>名称：</span><span>{{client.clientName}}</span>
				</Col>
				<Col span="4">
					<span>性别：</span>
					<span v-if="client.sex === true">男</span>
					<span v-else-if="client.sex === false">女</span>
				</Col>
				<Col span="4">
					<span>电话：</span><span>{{client.phone}}</span>
				</Col>
				<Col span="8">
					<Button @click="activateClient" v-if="client.dflg === true" class="float-right ml-1" type="success">激活</Button>
					<Button @click="freezenClient" v-else-if="client.dflg === false" class="float-right" type="error">冻结</Button>
					
				</Col>
			</Row>
			<Row class="m-1">
				<Col span="24">
					<div class="p-2">备注：</div>
					<Input v-model="client.bz" placeholder="请输入客户的手备注"></Input>
					<div>
						<Button @click="updateClient" class="float-right ml-1" type="primary">保存</Button>
					</div>
				</Col>
			</Row>
		</Layout>
		<!-- <Layout class="bg-white mb-5">
			<h5 class="m-1">客户所属门店信息</h5>
			<Row class="m-1">
				<Col span="4">
					<span>编号：</span><span>{{store.storeId}}</span>
				</Col>
				<Col span="4">
					<span>名称：</span><span>{{store.name}}</span>
				</Col>
				<Col span="16">
					<span>地址：</span><span>{{store.address}}</span>
				</Col>
			</Row>
		</Layout> -->
		<Layout class="bg-white mb-5">
			<h5 class="m-1">客户押金信息</h5>
			<Row class="m-1" v-if="account">
				<Col span="4">
					<span>押金：</span><span>￥{{util.parseMoney(account.depositAmount / 100)}}</span>
				</Col>
				<!-- <Col span="20">
					<Button @click="depositDeduct" v-if="account.depositAmount > 0" class="float-right" type="error">
						扣押
					</Button>
				</Col> -->
			</Row>
			<!-- <Layout :class="'bg-white'">
				<Layout :class="'bg-white'">
					<Table border class="m-1" 
						:columns="depositRecord.tableInfo.columnInfo" 
						:data="depositRecord.tableInfo.data">
						<template slot-scope="{ row, index }" slot="type">
							<span v-if="row.type === 'INS'">押金充值</span>
							<span v-else-if="row.type === 'OUT'">押金退还</span>
						</template>
						<template slot-scope="{ row, index }" slot="amount">
							<span>￥{{util.parseMoney(row.amount / 100)}}</span>
						</template>
					</Table>
				</Layout>
			</Layout> -->
		</Layout>
		<Layout class="bg-white mb-5">
			<h5 class="m-1">客户会员信息</h5>
			<Layout :class="'bg-white'">
				<Table border class="m-1" 
					:columns="vip.tableInfo.columnInfo" 
					:data="vip.tableInfo.data">
					<template slot-scope="{ row, index }" slot="vip_type">
						<span v-if="row.vipType === 'C'">会员卡</span>
						<span v-else-if="row.vipType === 'V'">会员券</span>
					</template>
					<template slot-scope="{ row, index }" slot="statu">
						<span v-if="row.statu === 0">未使用</span>
						<span v-else-if="row.statu === 1">使用中</span>
						<span v-else-if="row.statu === 2">已过期</span>
					</template>
				</Table>
			</Layout>
		</Layout>
		<Layout class="bg-white">
			<h5 class="m-1">客户订单信息</h5>
			<Layout :class="'bg-white'">
				<Table border :class="'m-1'" :columns="order.tableInfo.columnInfo" :data="order.tableInfo.data">
					<template slot-scope="{ row, index }" slot="amount">
						<span>￥{{util.parseMoney(row.amount / 100)}}</span>
					</template>
					<template slot-scope="{ row, index }" slot="statu">
						<span v-if="row.statu === 'ST'">已开始</span>
						<span v-else-if="row.statu === 'UNPAY'">未支付</span>
						<span v-else-if="row.statu === 'FIN'">已结束</span>
					</template>
				</Table>
			</Layout>
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				client: {},
				store: {},
				account: {},
				depositRecord: {
					tableInfo: {
						columnInfo: [{
								title: "编号",
								key: "depositId",
								width: 100
							},
							{
								title: "日期",
								key: "ct",
							},
							{
								title: "类型",
								slot: "type",
								width: 150
							},
							{
								title: "金额",
								slot: "amount",
								width: 200
							},
							{
								title: "原因",
								key: "reason"
							},
						],
						data: []
					}
				},
				vip: {
					tableInfo: {
						columnInfo: [{
								title: "编号",
								key: "vipId",
								width: 100
							},
							{
								title: "开始",
								key: "st"
							},
							{
								title: "结束",
								key: "et"
							},
							{
								title: "类型",
								slot: "vip_type",
								width: 150
							},
							{
								title: "状态",
								slot: "statu",
								width: 150
							},
						],
						data: []
					}
				},
				order: {
					tableInfo: {
						columnInfo: [{
								title: "编号",
								key: "orderId",
								width: 100
							},
							{
								title: "开始",
								key: "st"
							},
							{
								title: "结束",
								key: "et"
							},
							{
								title: "门店",
								key: "storeName"
							},
							{
								title: "金额",
								slot: "amount",
								width: 150
							},
							{
								title: "状态",
								slot: "statu",
								width: 150
							},
						],
						data: []
					}
				},
			}
		},
		methods: {
			updateClient: function() {
				this.http.put({
					url: "/client/info",
					param: {
						clientId: this.client.clientId,
						bz: this.client.bz
					}
				}).then(data => {
					this.message.info("修改备注成功");
				});
			},
			freezenClient: function() {
				this.http.put({
					url: "/client/"+this.client.clientId+"/freezen"
				}).then(() => {
					this.client.dflg = true;
				});
			},
			activateClient: function() {
				this.http.put({
					url: "/client/"+this.client.clientId+"/activate"
				}).then(() => {
					this.client.dflg = false;
				});
			},
			depositDeduct: function() {
				this.$router.push({
					name: "cutDepositRecord_new",
					params: {
						clientId: this.clientId,
						amount: this.account.depositAmount,
						storeName: this.store.name,
						clientName: this.client.clientName
					}
				})
			},
			init: function() {
				let self = this;
				this.http.get({
					url: "/client/info",
					param: {
						clientId: this.clientId
					}
				}).then(data => {
					this.client = data.client;
					this.account = data.account;
					this.depositRecord.tableInfo.data = data.deposit_record;
					this.order.tableInfo.data = data.order;
					this.vip.tableInfo.data = data.vip;
				});
			}

		},
		created: function() {
			this.clientId = this.$route.query.clientId;
			this.init();
		}

	}
</script>

<style>

</style>
